<template>
	<view class="content">
		<view class="top">
			<uamhead></uamhead>
			<view class="text">{{song.name}}</view>
		</view>
		<view class="song">
			<image :class="{ 'run' : isplayrotate }" :src="song.picUrl"></image>
			<text :class="[!isplayrotate ? 'iconfont iconbofang': 'iconfont iconpause']" @tap="playing"></text>
			<view></view>
		</view>
		<view class="SongName">{{song.artist}} : {{song.name}}</view>

		<scroll-view class="lyric" scroll-y="true">
			<view class="wrap" :style="{ transform : 'translateY(' + - (lyricIndex - 1) * 84 +'rpx)'}">
				<view class="index-item" :class="{active: lyricIndex == index}" v-for="(item,index) in song.lyric"
					:key="index">
					{{item.lyric}}-{{item.time}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	//uni-app使用 uni.createInnerAudioContext()音频播放api
	const innerAudioContext = uni.createInnerAudioContext() //想要实现暂停功能就要把该对象变为全局属性
	// import uamhead from "../../components/uamhead/uamhead.vue",
	import {
		songDetail,
		songUrl,
		songLyric
	} from "../../common/api.js"
	export default {
		data() {
			return {
				song: {
					id: '',
					name: '',
					artist: '',
					picUrl: '',
					songUrl: '',
					lyric: ''
				},
				isplayrotate: false,
				lyricIndex: 0
			}
		},
		onLoad(options) {
			let sId = options.songId;
			songDetail(sId).then(res => {
				console.log("songDetail", res)
				let s = res[1].data.songs[0];
				this.song.name = s.name;
				this.song.id = s.id;
				this.song.artist = s.ar[0].name;
				this.song.picUrl = s.al.picUrl
				songUrl(this.song.id).then(res => {
					console.log("songUrl", res)
					this.song.songUrl = res[1].data.data[0].url;
				});
				songLyric(sId).then(res => {
					console.log("songLyric", res)
					// this.song.lyric=res.data.lrc.lyric
					let lyric = res[1].data.lrc.lyric;
					let result = [];
					let re = /\[([^\]]+)\]([^[]+)/g;
					lyric.replace(re, ($0, $1, $2) => {
						result.push({
							time: this.formatTimeToSec($1),
							lyric: $2
						});
					});
					this.song.lyric = result;
				})
			});
		},

		methods: {
			playing() {
				if (!this.isplayrotate) {
					// autoplay，是否自动开始播放，默认 false
					innerAudioContext.autoplay = true
					// src，音频的数据链接，用于直接播放。
					innerAudioContext.src = this.song.songUrl;
					console.log('播放')
					innerAudioContext.onPlay(() => {
						
						this.listenLyricIndex()
						console.log("开始播放")
					})
					this.innerAudioContext = innerAudioContext
				} else {
					console.log('暂停')
					innerAudioContext.pause();

					innerAudioContext.onPause(() => { //暂停时调用的方法 
						//startTime  设置开始时间  currentTime 暂停时的秒数
					innerAudioContext.startTime = innerAudioContext.currentTime
					})
				}
				this.isplayrotate = !this.isplayrotate;


				innerAudioContext.onCanplay(() => {
					let intervalID = setInterval(() => {
						if (innerAudioContext.duration !== 0) {
							clearInterval(intervalID);
							console.log("音频时长", innerAudioContext.duration);
						}
					}, 500);
				});

				// // onError	,音频播放错误事件
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});

			},


			formatTimeToSec(time) {
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},

			//歌词滚动
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for (var i = 0; i < this.song.lyric.length; i++) {
						if (this.song.lyric[this.song.lyric.length - 1].time < this.innerAudioContext
							.currentTime) {
							this.lyricIndex = this.song.lyric.length - 1;
							break;
						}
						if (this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i + 1]
							.time > this.innerAudioContext.currentTime) {
							this.lyricIndex = i;
						}
					}
				})
			}
		}
	}
</script>

<style>
	.top {
		display: flex;
		align-items: center;
	}

	.top .text {
		font-size: 50rpx;
		margin: auto;
	}

	.song {
		margin: 210rpx auto 44rpx auto;
		background: url('../../static/images/disc.png');
		width: 580rpx;
		height: 580rpx;
		background-size: cover;
		position: relative;
	}

	.song image {
		width: 380rpx;
		height: 380rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 3;
		animation: 10s linear infinite move;
		animation-play-state: paused;
	}



	.song view {
		position: absolute;
		width: 170rpx;
		height: 266rpx;
		position: absolute;
		left: 60rpx;
		right: 0;
		margin: auto;
		top: -170rpx;
		background: url('../../static/images/needle.png');
		background-size: cover;
	}

	.song text {
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		color: white;
		z-index: 4;
	}

	.SongName {
		color: #19161c;
		font-size: 40rpx;
		margin-left: 48rpx;
	}

	@keyframes move {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.song .run {
		animation-play-state: running;
	}

	.lyric {
		margin-top: 20rpx;
		height: 446rpx;
		line-height: 82rpx;
		font-size: 32rpx;
		text-align: center;
		color: #949495;
		overflow: hidden;
	}

	.active {
		color: blue;
	}

	.lyric .wrap {
		transition: .5s;
	}

	.lyric .item {
		height: 82rpx;
	}
</style>
